<template>
  <!-- 分析预警弹窗 -->
  <div class="main_box">
    <div class="yujingtc2 flex" v-if="yujingdata">
      <div class="flex3 yujingtc_l">
        <p class="font_s20" style="margin: 0.5rem 0;padding: 0 1rem;color: #8CFFD5;line-height: 2.5rem;">
          {{ (yujingdata.yjnr)?yujingdata.yjnr:'' }}
        </p>
        <p class="font_s16 colorF" style="padding: 0 1rem;line-height: 1.8rem;">
          风险程度：中 &nbsp; &nbsp; &nbsp; &nbsp;预警来源：{{yujingdata.yjly}}
        </p>
        <p class="font_s20" style="display: inline-block;padding: 0 1rem;margin: 1rem 0;background: #0C266B;border-radius: 3rem; line-height: 3rem;color: #65FDFF;">&nbsp;&nbsp;<img
            class="verticM" src="../../../assets/img/bottom/51-2.png">&nbsp;&nbsp;预警时间:
          {{yujingdata.yjsj}}
        </p>
        <p style="border-bottom: dashed 1px #142F61"></p>
        <p class="font_s20 PingFangMedium colorF" style="margin-left:5px; margin-top:0.8rem;">
          <img class="verticM" src="../../../assets/img/bottom/51-1.png">&nbsp;&nbsp;
          {{yujingdata.orgName}}
        </p>
        <p class="font_s16 PingFangMedium colorF" style="margin-left:5px; margin-top:1rem;margin-bottom: 1rem;">
          <img class="verticM" src="../../../assets/img/bottom/50.png">&nbsp;&nbsp;
          {{yujingdata.orgAddr}}
        </p>
        <ul class="flex textC PingFangRegular font_s16 colorF yujing_xy">
          <li>
            <p>{{yujingdata.xyfs}}</p>
            <p>信用分</p>
          </li>
          <li>
            <p>{{yujingdata.fxdj}}</p>
            <p>风险等级</p>
          </li>
          <li>
            <p>{{yujingdata.xydj}}</p>
            <p>信用等级</p>
          </li>
          <li>
            <p>{{ dic.JGDJ[yujingdata.orgLevel]}}</p>
            <p>机构等级</p>
          </li>
        </ul>
        <div class="colorF font_s16" style="line-height: 2.5rem;padding-top: 1rem;">
          <p>统一信用代码：{{yujingdata.unicode}}</p>
          <p>设立日期：{{yujingdata.orgOpenDate}}</p>
          <!-- <p>营业期限：2012年7月至2025年7月</p> -->
          <!-- <p>组织机构代码：暂无</p> -->
          <p>法人代表：{{yujingdata.owner}}</p>
        </div>
      </div>
      <div class="flex3 yujingtc_r">
        <span style="color:#FFFFFF;display:flex;justify-content: flex-end;"  @click="$emit('hidden')">
          <img style="margin-top:5px; margin-left:18rem;" src="../../../assets/img/bottom/1272.png">
        </span>
        <div class="flex JustifyContentSB AlignItemsC">
          <p style="margin: 1rem 0;background:#101D40;color: #FFDF09;width: 30%;padding: 0.5rem 0;">&nbsp;&nbsp;<img class="verticM" src="../../../assets/img/bottom/51-3.png">&nbsp;&nbsp;处置流程
          </p>
          <img v-if="yujingdata.yjlx==2||yujingdata.yjlx==4||yujingdata.yjlx==12||yujingdata.yjlx==13"
               class="verticM" style="height: 2rem;" src="../../../assets/img/bottom/07.png">
        </div>

        <div style="height: 40rem;overflow-y: auto;padding-top: 1rem;" class="scrollBar">
          <ul class="colorF" style="border-left: solid #335E9B;margin-left: 1rem;padding-left: 1rem;" v-if="yujingdata.histries.length>0">
            <li
                    style="padding-bottom: 1rem"
                    v-for="(item, index) in yujingdata.histries"
                    :key="index">
              <div class="flex JustifyContentSB">
                <div class="flex">
                  <img style="height: 1.5rem;margin-left: -1.9rem;" src="../../../assets/img/bottom/151.png" class="verticM">
                  <p class="yybj" v-if="index===0">{{ item.dqzt_str }}</p>
                  <p class="yybj2" v-if="index===1">{{ item.dqzt_str }}</p>
                  <p class="yybj3" v-if="index===2">{{ item.dqzt_str }}</p>
                  <p :class="yujingdata.sjlx >= 4? 'yybj4':'yybj4'" v-if="index===3">{{ item.dqzt_str }}</p>
                  <p :class="yujingdata.sjlx >= 5? 'yybj5':'yybj5'" v-if="index===4">{{ item.dqzt_str }}</p>
                </div>
                <p>{{item.kssj}}</p>
              </div>
              <!--<p class="font_s16" style="line-height: 2.5rem">{{(item.jgms)?(item.jgms||'暂无'):''}}</p>-->
              <p v-if="index > 0" class="font_s16" style="line-height: 2.5rem">{{(item.jgms)?(item.jgms||'暂无'):''}}</p>
              <div v-if="index===0">
                <p class="font_s16" style="line-height: 2.5rem" v-if="isWarn == '0'">{{(item.jgms)?(item.jgms||'暂无'):''}}</p>
                <ul class="font_s16" v-if="yujingdata.warnTypeAndRulesVoList && yujingdata.warnTypeAndRulesVoList.length > 0">
                  <li v-for="(items,index) in yujingdata.warnTypeAndRulesVoList"
                      :key="index"
                      style="line-height: 1.45rem">
                    <p class="font_s16" style="line-height: 2.5rem" v-if="items.tFxsxpgmxVoList.length === 0">{{(item.jgms)?(item.jgms||'暂无'):''}}</p>
                    <p class="font_s16" style="color: #FACD1A;font-weight: bold" v-if="items.tFxsxpgmxVoList.length > 0">【不合格】</p>
                    <div v-if="items.tFxsxpgmxVoList && items.tFxsxpgmxVoList.length > 0">
                      <p v-for="(itemTwo, indexTwo) in items.tFxsxpgmxVoList"
                         :key="indexTwo"
                         style="margin-left: .4rem">
                        {{indexTwo + 1}}.{{items.warnTypeStr}}:{{itemTwo.pgnr}}
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <ul class="imgList"
                  style="margin:0 0.5rem;width: 22rem;overflow: hidden;">
                <li v-for="(item,index) in item.fjlist"
                    :key="index">
                  <img v-if="item.fjlx==='0'" :class="yulan == item.jgxqfjdtlid? 'fangda3':'shuxiao4'"
                       @click="yulanfun(item.jgxqfjdtlid)" :src="item.fjlj" alt="">
                  <video v-if="item.fjlx==='1'" width="100" height="120" controls="controls"
                         :src="item.fjlj" >
                    你的浏览器不支持
                  </video>
                </li>
              </ul>
              <div v-if="item.dqzt === '2' && yujingdata.status >= 2" style="margin: 0" class="colorF font_s16 jianchary textC flexC JustifyContentC"
                   :class="renyuanxz==1? 'jianchary':'jianchary2'" @click="renyuanxz=1">
                <p><img style="width: 3.6875rem;height: 3.5625rem;" :src="item.headimgurl"></p>
                <p>{{ item.jgry }}</p>
                <p>工号:{{ item.jgid }}</p>
                <p>{{ item.jgrylxdh }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomYLModel',
  props: {
    rwbh: [String, Number],
    yujingdata: Object,
    isWarn: [String, Number]
  },
  data() {
    return {
      yulan: 0,
      regulationDetails: Object,
      orgInfo: Object,
      renyuanxz: 0,
      yujingtc2: false,
      dic: {
        JGQJ: {
          "01": "2500以下",
          "02": "2500-3500",
          "03": "3500-4500",
          "04": "4500-5500",
          "05": "5500以上",
        },
        QYLX: {
          "1": "外环内",
          "2": "外环外",
          "3": "沿江片",
        },
        BODYCOUNT_CODE_NAME: {
          "bjb": "保基本养老床位机构数",
          "nsyl": "内设医疗机构数",
          "zzzj": "长者照护之家机构数",
        },
        NLD: {
          "01": "60-69岁",
          "02": "70-79岁",
          "03": "80-89岁",
          "04": "90岁以上",
        },
        SJLX: {
          "01": {
              typeName: "登记",
              content: "首次取得民办非企业单位证书"
          },
          "02": {
              typeName: "执业证照",
              content: "首次取得养老机构执业证照"
          },
          "03": {
              typeName: "设立许可",
              content: "首次取得养老机构设立许可证"
          },
          "04": {
              typeName: "备案",
              content: "首次取得养老机构备案时间"
          },
          "05": {
              typeName: "变更",
              content: "变更法人成功"
          },
          "06": {
              typeName: "变更",
              content: "变更门牌成功"
          },
          "07": {
              typeName: "变更",
              content: "变更服务范围成功"
          },
          "08": {
              typeName: "变更",
              content: "变更床位成功"
          },
          "09": {
              typeName: "变更",
              content: "变更单位名称成功"
          },
          "10": {
              typeName: "变更",
              content: "变更地址成功"
          },
          "11": {
              typeName: "变更",
              content: "变更注册资金"
          },
          "12": {
              typeName: "变更",
              content: "变更业务主管部门"
          },
          "13": {
              typeName: "到期",
              content: "许可证到期时间"
          }
        },
        JGDJ: {
          "0": "待评定",
          "1": "一级",
          "2": "二级",
          "3": "三级",
        },
        SJLY: {
          "1": "12345市民热线",
          "2": "群众举报",
          "3": "民政局"
        }
      }
    }
  },
  methods: {
    yulanfun(index) {
      if (!this.yulan) {
        this.yulan = index
      } else {
        this.yulan = 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .imgList {
    max-height: 13rem;
  }
  .imgList li {
    height: 6rem;
    float: left;
    width: 5rem;
    display: inline-block;
    margin-right: .5rem;
  }
  .fangda3{
    width: 65rem;
    height: 45rem;
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 1;
  }
  .main_box {
    z-index: 4;
    width: 100%;height: 100%;position: absolute;left: 0;top: 0
  }
  .shuxiao2{
    width: 10rem;height: 5rem;
  }
  .shuxiao3{
    width: 7rem;height: 8rem;
  }
  .yujingtc2{
    position: absolute;
    top: 9%;
    left: 13%;
    z-index: 4;
    width: 75%;
    height: 82%;
    /* background: #0090FF; */
    /* background: url(../img/comprehensive/right/18.png) no-repeat;
      background-size: 100% 100%; */
  }
  .yujingtc_l,.yujingtc_r{
    padding: 2rem;
    background: url(../../../assets/img/bottom/18.png) no-repeat;
    background-size: 100% 100%;
  }
  .scrollBar {
    overflow: auto;
  }
  .scrollBar::-webkit-scrollBar {
    width: 8px;
    border-radius: 10px;
    background-color: rgba($color: #00000000, $alpha: 0)
  }
  .scrollBar::-webkit-scrollBar-thumb {
    border-radius: 10px;
    background-color: rgba($color: #00000000, $alpha: 0)
  }
  .fangda2{
    width: 40rem;
    height: 30rem;
    position: absolute;
    top: 0rem;
    left: 0rem;
    z-index: 1;
  }
  .fangda3{
    width: 65rem;
    height: 45rem;
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 1;
  }
  .shuxiao{
    width: 7rem;height: 5rem;
  }
  .fangda{
    width: 58rem;
    height: 34rem;
    position: absolute;
    top: 0rem;
    left: -56rem;
    z-index: 1;
  }
  .shuxiao2{
    width: 10rem;height: 5rem;
  }
  .shuxiao3{
    width: 7rem;height: 8rem;
  }
  .shuxiao4{
    width: 5rem;height: 6rem;float: left;
  }
  .yybj,.yybj2,.yybj3,.yybj4,.yybj5,.yybj33,.yybj44{
    padding: 0.5rem 1.5rem;
    margin-top: -0.5rem;
  }
  .jianchary{
    margin: 0 2rem;
    width: 8.8125rem;
    height: 8.6875rem;
    background:#5E7DDF ;
  }
  .jianchary2{
    margin: 0 2rem;
    width: 8.8125rem;
    height: 8.6875rem;
    background:#304EAD ;
  }
  .yujing_xy li{
    margin-right: 0.3rem;
    padding: 0.5rem;
  }
  .yujing_xy li:nth-child(1){
    margin-right: 0.3rem;
    padding: 0.5rem;
    background-image: url("../../../assets/img/bottom/13.png");
    background-size: 100% 100%;
  }
  .yujing_xy li:nth-child(2){
    margin-right: 0.3rem;
    padding: 0.5rem;
    background-image: url("../../../assets/img/bottom/14.png");
    background-size: 100% 100%;
  }
  .yujing_xy li:nth-child(3){
    margin-right: 0.3rem;
    padding: 0.5rem;
    background-image: url("../../../assets/img/bottom/15.png");
    background-size: 100% 100%;
  }
  .yujing_xy li:nth-child(4){
    margin-right: 0.3rem;
    padding: 0.5rem;
    background-image: url("../../../assets/img/bottom/13.png");
    background-size: 100% 100%;
  }
  .yybj{
    background: url(../../../assets/img/bottom/19.png) no-repeat;
    background-size: 100% 100%;
  }
  .yybj2{
    background: url(../../../assets/img/bottom/20.png) no-repeat;
    background-size: 100% 100%;
  }
  .yybj3{
    background: url(../../../assets/img/bottom/21.png) no-repeat;
    background-size: 100% 100%;
  }
  .yybj4{
    background: url(../../../assets/img/bottom/22.png) no-repeat;
    background-size: 100% 100%;
  }
  .yybj5{
    background: url(../../../assets/img/bottom/23.png) no-repeat;
    background-size: 100% 100%;
  }
  .yybj33{
    background: url(../../../assets/img/bottom/22.png) no-repeat;
    background-size: 100% 100%;
  }
</style>
